// 定义一个存放员工信息的数组
var users = new Array();

var operateType;   // 按钮的作用

// 创建用户的构造方法
function user(code,username,sex,password,age,birthday){
    this.code=code;
    this.username=username;
    this.sex=sex;
    this.password=password;
    this.age=age;
    this.birthday=birthday;   
}

//页面初始化调用方法
 function init(){
    users[0] = new user("1001", "张三", "女", "1234", "29", "1991-1-1");
    users[1] = new user("1002", "李四", "男", "1234", "28", "1992-2-2");
    users[2] = new user("1003", "王五", "女", "1234", "27", "1993-3-3");
    users[3] = new user("1004", "赵六", "女", "1234", "26", "1994-4-4");  
    
    // 调用表格内容刷新方法
    refresh(users);
};

//表格内容刷新方法
var refresh=function(users){
    var tbody = document.getElementById("tbody");
    var html = "";
    var color = "warning";
    var flag = true;
    for(var i in users){
        if(flag){
            color = "info";
        }else{
            color = "warning";
        }
        html = html + "<tr class='"+color+"'>"+
        "<td style='width:50px;'><input type='checkbox'></td>"
        + "<td id='code'>" +users[i].code + "</td>"
        + "<td id='username'>" + users[i].username + "</td>"
        + "<td id ='sex'>" + users[i].sex +"</td>"
        + "<td id = 'password'>" + users[i].password + "</td>"
        + "<td id = 'age'>" + users[i].age + "</td>"
        + "<td id = 'birthday'>" + users[i].birthday + "</td>" + "</tr>";

        flag != flag;  // 颜色转换     
    }
    tbody.innerHTML = html;  // 在表格中创建所有tr元素
}

// 当点击添加按钮触动事件
$("#user_add").on("click", function(){
    operateType = "add"; // 赋值按钮的类型 
});

// 当点击修改按钮
$("#user_edit").on("click", function(){
    operateType = "edit";
});

// 添加用户
$("#save").on("click", function(){
    if(operateType == "add"){
        var newUser = new user($("#m_code").val(), $("#m_username").val(), $("#m_sex").val(),
        $("#m_password").val(), $("#m_age").val(), $("#m_birthday").val());

        users = users.concat(newUser);  // 在原数组中添加一个新的用户信息
    }else if(operateType == "edit"){
        for(var i = 0; i < users.length; i++){
            // 如果选中的用户序号和数组中某个序号相同，那数组中的这个用户就是要修改的用户信息
            if(code == users[i].code){   
                users[i].code = $("#m_code").val();
                users[i].username = $("#m_username").val();
                users[i].sex = $("#m_sex").val();
                users[i].password = $("#m_password").val();
                users[i].age = $("#m_age").val();
                users[i].birthday = $("#m_birthday").val();
            }
        }
        alert("用户信息修改成功！");
    }
    refresh(users);  // 刷新表格中的数据内容
    clear();
});

// 清除模态框内容
function clear(){
    $("#m_code").val("");
    $("#m_username").val("");
    $("#m_sex").val("");
    $("#m_password").val("");
    $("#m_age").val("");
    $("#m_birthday").val("");
}
var code; // 被修改用户的序号

// 删除用户
$("#user_delete").on("click", function(){
    var checkbox = $("input[type='checkbox']");  // 获取所有的复选框
    let f = false;  // 是否选中用户的标记
    for(var i =0; i <checkbox.length; i++){
        var box = checkbox[i];
        if(box.checked){   // 某个复选框被选中的
            f = true;  // 标记 有复选框被选中
            box = $(box);  // jsdom对象转换成jquery对象
            let code = box.parent().siblings("#code").text();  // 复选框父级的兄弟#code元素
            for(var i= 0; i < users.length; i++){
                if(code == users[i].code){
                    users.splice(i, 1);  // 删除1个数组中下标为i的元素
                    alert("用户信息删除成功！");
                }
            }
        }
    }
    if(!f){
        alert("请选择一个用户！");
    }
    refresh(users);  // 刷新，保证表格是最新的数据内容
});


// 编辑用户
$("#user_edit").on("click", function(){
    var checkboxs = $("input[type='checkbox']");
    let f = false;
    for(var i = 0; i < checkboxs.length; i++){
        var box = checkboxs[i];
        if(box.checked){  // 某个复选框被选中的
            f = true;
            $(this).attr("data-toggle", "modal");     // 启用模态框
            $(this).attr("data-target", "#myModal");  // 启用模态框
            box = $(box);  // jsdom对象转换成jquery对象
            code = box.parent().siblings("#code").text();
            // 获取表格中选中用户的各项数据
            var username = box.parent().siblings("#username").text();
            var sex = box.parent().siblings("#sex").text();
            var password = box.parent().siblings("#password").text();
            var age = box.parent().siblings("#age").text();
            var birthday = box.parent().siblings("#birthday").text();
            // 选中用户的各项数据，放在模态框对应的input框中
            $("#m_code").val(code);
            $("#m_username").val(username);
            $("#m_sex").val(sex);
            $("#m_password").val(password);
            $("#m_age").val(age);
            $("#m_birthday").val(birthday);
        }
    }
    if(!f){
        alert("请选择一个用户！");
        $(this).attr("data-toggle", "null");     // 禁用模态框
        $(this).attr("data-target", "null");  // 禁用模态框
    }
});

var newusers;
// 查询用户
$("#user_find").on("click", function(){
    newusers = new Array();
    var code = $(this).siblings("#s_code").val(); 
    var name = $(this).siblings("#s_username").val();
    if(code =="" && name == "" ){
        alert("请输入查询条件！（姓名或者工号）");
        refresh(users);
        return false;
    }

    for(var i= 0; i < users.length; i++){
        if((code!="" && users[i].code==code) || (name!="" && users[i].username==name)){
            newusers=newusers.concat(users[i]);
        }
    }

    if(newusers.length == 0){
        alert("没有查询到你需要的员工信息！");
        return false;
    }
    refresh(newusers);
});


